<template>
<div class="app-container">
    <el-form :inline="true">
        <el-form-item>
            <el-input v-model="order.orderno" placeholder="订单号" />
        </el-form-item>

        <el-form-item>
            <el-select v-model="order.status" placeholder="订单状态">
                <el-option></el-option>
                <el-option v-for="item in status" :label="item.name" :value="item.status" :key="item.status"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="getOrder()">查询</el-button>
        </el-form-item>
    </el-form>

    <el-table v-loading="listLoading" :data="orderList" element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column align="center" label="订单日期" prop="order.creationDate">
        </el-table-column>
        <el-table-column align="center" label="订单编号" prop="order.orderno">
        </el-table-column>
        <el-table-column align="center" label="商品">
            <template slot-scope="scope">
                <el-popover placement="top-start" title="" trigger="hover">
                    <img :src="orderList[scope.$index].goodsImage" alt="" style="width: 150px;height: 150px">
                    <img slot="reference" :src="orderList[scope.$index].goodsImage" style="width: 30px;height: 30px">
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column align="center" label="商品名称" prop="goodsName">
        </el-table-column>
        <el-table-column align="center" label="收货人" prop="order.buyer">
        </el-table-column>
        <el-table-column align="center" label="联系方式" prop="order.telephone">
        </el-table-column>
        <el-table-column align="center" label="收货地址" prop="order.address">
        </el-table-column>
        <el-table-column align="center" label="订单金额" prop="order.money">
        </el-table-column>
        <el-table-column align="center" label="订单状态">
            <template slot-scope="scope">
                <p v-if="orderList[scope.$index].order.status==-1">订单关闭</p>
                <p v-if="orderList[scope.$index].order.status==1">待付款</p>
                <p v-if="orderList[scope.$index].order.status==2">已付款</p>
                <p v-if="orderList[scope.$index].order.status==3">已发货</p>
                <p v-if="orderList[scope.$index].order.status==4">已收货(订单完成)</p>
                <p v-if="orderList[scope.$index].order.status==0">支付失败</p>
                <el-button type="success" @click="deliver(orderList[scope.$index].order.orderno)" v-if="orderList[scope.$index].order.status==2" plain>我已发货</el-button>
            </template>

        </el-table-column>

        <el-table-column align="center" label="操作">
            <template slot-scope="scope">
                <router-link :to="'/order/editorder/'+orderList[scope.$index].order.id">
                    <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
                </router-link>
                <br />
                <el-button size="mini" type="danger" icon="el-icon-delete" @click="removeById(orderList[scope.$index].order.id)">删除</el-button>

            </template>
        </el-table-column>
    </el-table>
    <el-pagination :current-page="page" :total="total" :page-size="limit" :page-sizes="[5, 10, 20]" style="padding: 30px 0; text-align: center" layout="sizes, prev, pager, next, jumper, ->, total" @current-change="changeCurrentPage" @size-change="changePageSize" />
</div>
</template>

<script>
export default {
    data() {
        return {
            orderList: [],
            listLoading: true,
            url: "http://localhost:8888/order/order/order/getOrdersByPage",
            page: 1,
            limit: 5,
            total: 0,
            order: {
                orderno: '',
                status: null,
            },
            status: [{
                    status: -1,
                    name: '订单关闭'
                },
                {
                    status: 0,
                    name: '支付失败'
                },
                {
                    status: 1,
                    name: '待付款'
                },
                {
                    status: 2,
                    name: '已付款'
                },
                {
                    status: 3,
                    name: '已发货'
                },
                {
                    status: 4,
                    name: '已收货(订单完成)'
                },
            ]
        }
    },
    created() {
        this.getOrder();
    },
    watch: {
        // username: function () {
        //     this.getUser()
        // }
    },
    methods: {
        deliver(orderno) {
            console.log(orderno)
            this.axios({
                method: 'put',
                url: 'http://localhost:8888/order/order/order/updateOrderStatusByOrderNo',
                params: {
                    orderno: orderno,
                    status: 3
                }
            }).then(res => {
                console.log(res)
                this.getOrder();
            });
        },
        getOrder(form) {
            console.log(this.order)
            this.listLoading = true
            this.axios({
                url: this.url,
                method: 'post',
                data: {
                    ...this.order
                },
                params: {
                    page: this.page,
                    limit: this.limit,
                }
            }).then(res => {
                this.total = res.data.data.total;
                this.orderList = res.data.data.records;
                this.listLoading = false
            })
        },
        removeById(id) {
            console.log(id)
        },
        changeCurrentPage(page) {
            this.page = page;
            this.getOrder();
        },
        changePageSize(size) {
            this.limit = size;
            this.getOrder();
        }
    }
}
</script>

<style>

</style>
